<template>
    <div class="content-column second-column">
        <div class="column-panel panel-2-1">
            <MapPanel ref="mapPanelRef" @stationChange="handleStationChange" />
        </div>
        <div class="column-panel panel-2-2">
            <div class="panel-title">专项执行情况</div>
            <div class="panel-content">
                <div ref="chartRef" class="chart-container"></div>
            </div>
            <div class="panel-foot"></div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import MapPanel from '../Panel/MapPanel.vue';
const props = defineProps({
    data: {
        type: Object,
        required: true
    }
});
const mapPanelRef = ref(null);
const chartRef = ref(null);
let chartInstance = null;
let refreshTimer = null;
const currentStationInfo = ref({
    name: '',
    status: '正常',
    updateTime: ''
});
const chartData = ref({
    dates: [],
    taskCounts: []
});
const initChart = () => {
    if (!chartRef.value) return;
    chartInstance = echarts.init(chartRef.value);
    setChartOption();
};
const setChartOption = () => {
    const displayDates = chartData.value.dates.slice(-180);
    const displayTaskCounts = chartData.value.taskCounts.slice(-180);
    const option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(10, 30, 60, 0.8)',
            borderColor: 'rgba(204, 204, 204, 0.3)',
            borderWidth: 1,
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: displayDates,
            axisLine: {
                lineStyle: {
                    color: 'rgba(204, 204, 204, 0.3)'
                }
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.7)',
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 4,
            interval: 1,
            axisLine: {
                lineStyle: {
                    color: 'rgba(204, 204, 204, 0.3)'
                }
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.7)',
                formatter: '{value}'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(204, 204, 204, 0.1)'
                }
            }
        },
        series: [
            {
                name: '任务数',
                type: 'line',
                smooth: true,
                data: displayTaskCounts,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 3,
                    color: '#02a6b5'
                },
                itemStyle: {
                    color: '#02a6b5',
                    borderColor: '#fff',
                    borderWidth: 2
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(2, 166, 181, 0.3)' },
                            { offset: 1, color: 'rgba(2, 166, 181, 0)' }
                        ]
                    }
                },
                emphasis: {
                    scale: true
                }
            }
        ]
    };
    chartInstance.setOption(option);
};
const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};
onMounted(() => {
    const data = props.data.taskDailyList || [];
    data.forEach(item => {
        chartData.value.dates.push(item.localDate);
        chartData.value.taskCounts.push(item.number);
    });
    initChart();
    window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
    clearInterval(refreshTimer);
    window.removeEventListener('resize', handleResize);
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
});
watch(chartData, () => {
    setChartOption();
});
const handleStationChange = (data) => {
    if (data.isVisible) {
        currentStationInfo.value = {
            name: data.name || '',
            status: data.status || '正常',
            updateTime: data.updateTime || ''
        };
    }
};
</script>
<style scoped>
.content-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 15px;
}

.second-column {
    flex: 2;
}

.column-panel {
    background-color: rgba(10, 30, 60, 0.2);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
    background-image: url('/dashboard/images/line.png');
    position: relative;
    border: 1px solid rgba(204, 204, 204, 0.3);
}

.column-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
}

.column-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
}

.column-panel .panel-foot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
}

.column-panel .panel-foot::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
}

.column-panel .panel-foot::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
}

.panel-title {
    font-size: 1rem;
    padding: 0 0 4px 0;
    border-bottom: 1px solid rgba(204, 204, 204, 0.3);
    color: white;
}

.panel-content {
    flex: 1;
    overflow: hidden;
    color: #fff;
}

.chart-container {
    width: 100%;
    height: 100%;
}

.panel-2-1 {
    flex: 68.5;
    border: 0;
    background: transparent;
}

.panel-2-2 {
    flex: 31.5
}

.panel-2-1::before,
.panel-2-1::after {
    content: none;
    display: none;
}

@media (max-width: 768px) {
    .second-column {
        width: 100%;
        height: auto;
    }

    .panel-title {
        font-size: 1rem;
    }
}
</style>
